<script lang="ts">
import { ref, computed } from 'vue'
import axios from 'axios';
import router from '@/router';
import { useTokenStore } from '@/stores/token.js';
import { ElAvatar, ElMessage, ElMessageBox } from 'element-plus';
import { User, SwitchButton } from '@element-plus/icons-vue'
import AIChatBox from '@/components/AIChatBox.vue'
import { ChatDotRound } from '@element-plus/icons-vue'

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
function goToDetails() {
  router.push('/login');
}
const searchQuery = ref(''); // 假设使用 Vue 3 的响应式 API

const search = function (query) {
  axios.get('http://localhost:8080/search', { params: { query } })
    .then(result => {
      searchQuery.value = result.data; // 将结果赋值给响应式变量
    })
    .catch(error => {
      console.log(error); // 修正错误变量名称
    });
}
const buttons = [
  { type: '', text: 'plain' },
] as const

const handleCommand = (command) => {
  if (command === 'logout') {
    //退出登录
    ElMessageBox.confirm(
      '你确认退出登录吗？',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(async () => {
        try {
          // 清空pinia中的token和个人信息
          const tokenStore = useTokenStore();
          tokenStore.removeToken();

          // 跳转到登录页
          router.push('/login');

          // 更新 localStorage
          localStorage.setItem('isLoggedIn', 'false');
        } catch (error) {
          console.error("发生错误：", error);
          // 可以选择是否在这里显示错误消息或其他处理
        }
      })
      .catch(() => {
        // 用户点击了取消
        ElMessage({
          type: 'info',
          message: '取消退出',
        });
      });
  }
}

// 在 script setup 部分添加 showChat 的定义
const showChat = ref(false)

export default {
  data() {
    const tokenStore = useTokenStore();
    const isLoggedIn = computed(() => !!tokenStore.token); // 判断用户是否已登录

    const selectedFile = ref(null);

    const userAvatar = ref(''); // 默认头像路径

    return {
      activeIndex,
      isDark: false,
      isLoggedIn,
      selectedFile,
      search,
      User,
      SwitchButton,
      handleCommand,
      userAvatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
      handleSelect,
      logoSrc: 'src/assets/logo.jpg',
      searchQuery: '',
      stats: {
        developers: 2022,
        companies: 90,
        projects: 223,
      },
      buttons: [
        { text: '' }
      ],
      services: [
        {
          title: '需求梳理',
          description: '产品需求规划，帮助把产品想法更好的落地',
          icon: 'src/assets/jt.png',
        },
        {
          title: '项目整包',
          description: '智能匹配优质开发者，一对一专属服务',
          icon: 'src/assets/jt.png',
        },
        {
          title: '云端工作',
          description: '按月聘用程序员，最快一天到岗，节省50%人力成本',
          icon: 'src/assets/jt.png',
        }
      ],
      steps: [
        {
          alt: '发布需求',
          title: '发布需求',
          desc: '工作日，客户经理将在1小时内联系您',
          img: 'src/assets/fbxq.png',
        },
        {
          alt: '匹配开发者',
          title: '匹配开发者',
          desc: '智能引擎+人工再确认为您在2千+开发者中筛选',
          img: 'src/assets/dl.png',
        },
        {
          alt: '面试开发者',
          title: '面试开发者',
          desc: '无偿为您对接多轮面试，自由沟通确认需求',
          img: 'src/assets/rw.png',
        },
        {
          alt: '托管费用',
          title: '托管费用',
          desc: '网站托管费用，全程跟进开发过程',
          img: 'src/assets/czsj.png',
        },
        {
          alt: '企业验收',
          title: '企业验收',
          desc: '开发完成，企业验收无误后，网站再给开发者结算',
          img: 'src/assets/qy.png',
        }
      ],
      reviews: [
        {
          name: '小船悠悠',
          company: '广州伽佤电子商务有限公司',
          comment: '工作细致，沟通顺畅，合作非常愉快，五星推荐！',
          avatar: 'src/assets/tx_1.jpg',
          link: 'https://www.tianyancha.com/company/6984600450',
        },
        {
          name: '华为资深UI',
          company: '前端开发',
          comment: '设计师人很好，耐心细致，快速解决了我们的核心需求。',
          avatar: 'src/assets/tx_2.jpg',
        },
        {
          name: 'tt',
          company: '广州伽佤电子商务有限公司',
          comment: '非常优秀靠谱的设计师，做事认真踏实，希望有机会再次合作！',
          avatar: 'src/assets/tx_3.jpg',
          link: 'https://www.tianyancha.com/company/6984600450',
        },
        {
          name: 'jucc',
          company: '广州万澄商贸有限公司',
          comment: '工程师很专业，也很敬业，工作周期结束了，高质量交付产品！',
          avatar: 'src/assets/tx_4.jpg',
          link: 'https://www.tianyancha.com/company/7030153865',
        },
        {
          name: 'hhh',
          company: '前中国联通',
          comment: '开发还是很负责的，整体来说还是很好的！',
          avatar: 'src/assets/tx_5.jpg',
        },
        {
          name: '枫叶🍁',
          company: '后端开发',
          comment: '工作效率高，沟通能力优秀，有求必应，有问必答，推荐！',
          avatar: 'src/assets/tx_6.jpg',
        }
      ],
      categories: [
        {
          title: '重点城市程序员兼职推荐',
          links: [
            { text: '北京程序员兼职', url: '#' },
            { text: '上海程序员兼职', url: '#' },
            { text: '深圳程序员兼职', url: '#' },
            { text: '杭州程序员兼职', url: '#' },
            { text: '广州程序员兼职', url: '#' },
            { text: '成都程序员兼职', url: '#' },
            { text: '南京程序员兼职', url: '#' },
          ]
        },
        {
          title: '重点岗位程序员兼职推荐',
          links: [
            { text: '北京程序员兼职', url: '#' },
            { text: 'Rust兼职', url: '#' },
            { text: '小程序兼职', url: '#' },
            { text: 'cocos2d-x兼职', url: '#' },
            { text: 'Unity3D兼职', url: '#' },
            { text: 'DBA兼职', url: '#' },
            { text: '运维兼职', url: '#' },
            { text: '测试兼职', url: '#' },
            { text: '移动其他兼职', url: '#' },
          ]
        }
      ],
      showChat: false,  // 在 data 中也添加这个属性
    };
  },
  components: {
    User,
    SwitchButton,
    AIChatBox,
    ChatDotRound,
  },
  computed: {
    firstThreeReviews() {
      return this.reviews.slice(0, 3); // 取前3条
    },
    lastThreeReviews() {
      return this.reviews.slice(3, 6); // 取后3条
    }
  },
  methods: {
    navigateTologin(page) {
      this.$router.push(`/${page}`); // 跳转到登录页面
      this.isLoggedIn = true; // 退出登录状态
      localStorage.setItem('isLoggedIn', 'true'); // 保存登录状态到 localStorage
    },
    navigateToregister(page) {
      this.$router.push(`/${page}`); // 跳转到登录页面
    },
    onError(event) {
      event.target.onerror = null; // 避免无限循环
      event.target.src = 'images/default-icon.png'; // 设置默认图标
    },
    setDefaultLogo() {
      this.logoSrc = 'src/assets/logo.jpg';
    },
    setDefaultIcon(event) {
      event.target.src = 'images/default-icon.png';
    },
    setDefaultAvatar(event) {
      event.target.src = 'images/default-avatar.jpg';
    },
    navigateTo(link) {
      window.location.href = link;
    },
    search() {
      console.log('Searching for:', this.searchQuery);
    },
    goToDetails(service) {
      console.log('Going to details for:', service.title);
    },
    toggleChat() {
      this.showChat = !this.showChat;
    }
  },
};
</script>

<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="handleSelect"
    style="height:75px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
    <el-menu-item index="0">
      <img style="width: 100px;height: 70px;margin-left: 53px;margin-right: 10px;" src="@/assets/logo.jpg"
        alt="CodeCash" />
    </el-menu-item>
    <el-search-item index="1" style="transform: translate(-78%,15px);">
      <el-input v-model="searchQuery" style="width: 320px;height:40px;" placeholder="搜索您感兴趣的内容" clearable />
      <el-button type="search" style="height: 40px;background-color:#007bff;color:white;">搜索</el-button>
    </el-search-item>
    <el-router-menu index="2" style="transform: translateX(-2%);">
      <el-link href="/" style="color: black; font-size: 18px;padding: 20px;">首页</el-link>
      <el-link href="/programmer" style="color: black; font-size: 18px;padding: 20px;">程序员</el-link>
      <el-link href="/task" style="color: black; font-size: 18px;padding: 20px;">任务大厅</el-link>
      <el-link href="/community" style="color: black; font-size: 18px;padding: 20px;">社区</el-link>
      <el-link href="/user/call" style="color: black; font-size: 18px;padding: 20px;">联系我们</el-link>
    </el-router-menu>
    <el-buttons-item index="3" style="transform: translateY(25%);margin-right: 20px;">
      <template v-if="!isLoggedIn">
        <el-button color="#2994F2" :dark="isDark" type="login" @click="navigateTologin('login')">登录</el-button>
        <el-button color="#2994F2" :dark="isDark" type="register" @click="navigateToregister('login')">注册</el-button>
      </template>
      <template v-else>
        <el-dropdown placement="bottom-end">
          <el-avatar :src="userAvatar" size="medium" />
          <el-icon>
            <CaretBottom />
          </el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="userInfo" :icon="User" @click="navigateTo('/userInfo')">个人中心</el-dropdown-item>
              <el-dropdown-item placement="bottom-end" @click="handleCommand('logout')"
                :icon="SwitchButton">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </el-buttons-item>
  </el-menu>
  <el-main>
    <div class="hero-section">
      <div class="hero-content">
        <h1>欢迎来到"码上有钱"程序员接单平台！</h1>
        <p class="subtitle" style="color: white;">2k+中高端开发者，您的专属云端团队</p>
        
        <div class="stats-container">
          <div class="stat-item">
            <div class="stat-number">{{ stats.developers }}</div>
            <div class="stat-label">位优秀程序员</div>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item">
            <div class="stat-number">{{ stats.companies }}</div>
            <div class="stat-label">家优秀企业</div>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item">
            <div class="stat-number">{{ stats.projects }}</div>
            <div class="stat-label">次完成项目</div>
          </div>
        </div>

        <div class="action-buttons">
          <div class="button-group">
            <span class="button-label">我是需求方</span>
            <el-button 
              class="primary-button"
              @click="navigateTo('/requirement')"
            >
              发布需求
            </el-button>
          </div>
          <div class="button-group">
            <span class="button-label">我是开发者</span>
            <el-button 
              class="primary-button"
              @click="navigateTo('/task')"
            >
              程序员接单
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="title">您的所求，应有尽有</div>
      <div class="description">
        支持纯云端工作，省钱；<br>
        标准化的服务和交付，省心；<br>
        BAT级别的开发者，专业；
      </div>
      <div class="card-container">
        <div class="card" v-for="service in services" :key="service.title">
          <div class="card-title">{{ service.title }}
            <button @click="goToDetails(service)"><img :src="service.icon" @error="setDefaultIcon"></button>
          </div>
          <div class="card-description">{{ service.description }}</div>
        </div>
      </div>
    </div>
    <div class="container2">
      <div class="title2">透明的合作流程</div>
      <div class="subtitle">先面试，后开发，先验收，再结算，让您放心一点！</div>
      <div class="steps">
        <div v-for="(step, index) in steps" :key="index" class="step">
          <img :src="step.img" :alt="step.alt" @error="onError($event)">
          <div class="step-title">{{ step.title }}</div>
          <div class="step-desc">{{ step.desc }}</div>
        </div>
      </div>
    </div>
    <div class="container3">
      <div class="title3"><strong style="font-weight: bold;">他们正在使用"码上有钱"程序员接单平台</strong></div>
      <div class="subtitle2">基于223个真实评价</div>
      <div class="reviews">
        <div class="review" v-for="review in firstThreeReviews" :key="review.name">
          <img :src="review.avatar" alt="用户头像" @error="setDefaultAvatar">
          <h3>{{ review.name }}</h3>
          <a :href="review.link">{{ review.company }}</a>
          <p>{{ review.comment }}</p>
        </div>
      </div>
      <div class="reviews2">
        <div class="review" v-for="review in lastThreeReviews" :key="review.name">
          <img :src="review.avatar" alt="用户头像" @error="setDefaultAvatar">
          <h3>{{ review.name }}</h3>
          <a :href="review.link">{{ review.company }}</a>
          <p>{{ review.comment }}</p>
        </div>
      </div>
    </div>
    <div class="container4">
      <div class="logo">
        <img src="../assets/logo.jpg" alt="码上有钱 Logo">
      </div>
      <div class="content1">
        <div class="category" v-for="(category, index) in categories" :key="index">
          <h3><strong style="font-weight: bold;">{{ category.title }}</strong></h3>
          <div class="links">
            <a v-for="(link, linkIndex) in category.links" :key="linkIndex" :href="link.url">{{ link.text }}</a>
          </div>
        </div>
      </div>
    </div>

    <!-- AI 聊天助手 -->
    <el-drawer
      v-model="showChat"
      title="AI 助手"
      size="400px"
      direction="rtl"
      :destroy-on-close="false"
      :modal="true"
      :with-header="true"
    >
      <AIChatBox />
    </el-drawer>
    
    <el-button
      class="chat-button"
      type="primary"
      circle
      @click="toggleChat"
    >
      <el-icon><ChatDotRound /></el-icon>
    </el-button>
  </el-main>
  <el-footer>
    <div class="footer">
      <div>
        <a href="#">动态公告</a> |
        <a href="#">帮助</a> |
        <a href="#">关于我们</a> |
        <a href="#">合作伙伴</a> |
        <a href="#">意见反馈</a> |
        <text style="color: rgb(78, 77, 77);">@"码上有钱"程序员接单平台</text>
      </div>
      <div class="credits">
        粤ICP备20220901号-4 | 粤公网安备33011002011599号
      </div>
    </div>
  </el-footer>
</template>



<style scoped>
.el-menu--horizontal>.el-menu-item:nth-child(1) {
  margin-right: auto;
}

.hero-section {
  width: 100vw;
  min-height: 600px;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: -20px;
  padding: 80px 20px;
  background: linear-gradient(135deg, #3f51b5 0%, #6c63ff 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('@/assets/grid.png') repeat;
  opacity: 0.07;
  z-index: 1;
}

.hero-content {
  max-width: 1200px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 0 20px;
}

.hero-content h1 {
  font-size: 2.8em;
  font-weight: 800;
  color: white;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: fadeInDown 1s ease;
}

.subtitle {
  font-size: 1.2em;
  color: white;
  margin-bottom: 60px;
  animation: fadeInUp 1s ease 0.2s;
  opacity: 0;
  animation-fill-mode: forwards;
}

.stats-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px auto;
  padding: 30px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  max-width: 800px;
  animation: fadeIn 1s ease 0.4s;
  opacity: 0;
  animation-fill-mode: forwards;
}

.stat-item {
  padding: 0 40px;
  text-align: center;
}

.stat-number {
  font-size: 2.5em;
  font-weight: 700;
  color: white;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-label {
  font-size: 1em;
  color: rgba(255, 255, 255, 0.9);
}

.stat-divider {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 60px;
  animation: fadeInUp 1s ease 0.6s;
  opacity: 0;
  animation-fill-mode: forwards;
}

.button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.button-label {
  font-size: 1em;
  color: rgba(255, 255, 255, 0.9);
}

.primary-button {
  min-width: 180px;
  height: 50px;
  font-size: 1.1em;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px;
  color: white !important;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.primary-button:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.5em;
  }
  
  .subtitle {
    font-size: 1.2em;
  }
  
  .stats-container {
    flex-direction: column;
    gap: 30px;
  }
  
  .stat-divider {
    width: 80%;
    height: 1px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 30px;
  }
}

.content {
  width: 1200px;
  height: 330px;
  margin: 110px auto;
  padding: 20px;
  background: linear-gradient(135deg, #F0F7FF 0%, #E6F3FF 100%);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* 右上角装饰圆 */
.content::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, rgba(66, 133, 244, 0.1) 0%, rgba(66, 133, 244, 0.05) 100%);
  border-radius: 50%;
  z-index: 1;
}

/* 左下角装饰圆 */
.content::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, rgba(66, 133, 244, 0.08) 0%, rgba(66, 133, 244, 0.03) 100%);
  border-radius: 50%;
  z-index: 1;
}

/* 添加装饰点 */
.content .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.content .dots::before {
  content: '';
  position: absolute;
  top: 40px;
  right: 200px;
  width: 8px;
  height: 8px;
  background: rgba(66, 133, 244, 0.3);
  border-radius: 50%;
  box-shadow: 
    30px 20px 0 rgba(66, 133, 244, 0.2),
    -20px 40px 0 rgba(66, 133, 244, 0.15);
}

/* 添加波浪装饰 */
.content .wave {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 400px;
  height: 100px;
  background: linear-gradient(135deg, rgba(66, 133, 244, 0.05) 0%, rgba(66, 133, 244, 0.02) 100%);
  clip-path: path('M0,100 C150,100 350,0 400,100 L400,100 L0,100');
}

/* 添加几何图形 */
.content .shapes {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.content .shapes::before {
  content: '';
  position: absolute;
  top: 60px;
  left: 180px;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(66, 133, 244, 0.2);
  transform: rotate(45deg);
}

.content .shapes::after {
  content: '';
  position: absolute;
  bottom: 40px;
  right: 160px;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(66, 133, 244, 0.15);
  border-radius: 4px;
  transform: rotate(-15deg);
}

/* 按钮样式保持不变 */
.el-button {
  background: #4285F4 !important;
  color: white !important;
  height: 44px;
  padding: 0 32px;
  font-size: 16px;
  font-weight: 500;
  border: none !important;
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.el-button:hover {
  background: #3367D6 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

.content h1 {
  margin: 60px 0;
  font-weight: bold;
}

.content p {
  font-size: 14px;
  line-height: 0.5;
  margin-bottom: 3px;
}

.stats {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.stats div {
  margin: 0 10px;
}

.buttons {
  margin: 20px 0;
}

.buttons span {
  font-size: 16px;
  margin-right: 60px;
  color: #333;
  position: relative;
  top: -12px;
}

.buttons a {
  margin: 100px 10px;
  padding: 10px 20px;
  color: black;
  background-color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 50px 20px;
  text-align: left;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

.description {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 40px;
  color: #575656;
  margin-top: 60px;
  margin-bottom: 80px;
}

.card-container {
  display: flex;
  justify-content: space-between;
}

.card {
  width: 250px;
  height: 100px;
  background-color: #e9eaec;
  padding: 20px;
  border-radius: 8px;
  text-align: left;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.card img {
  float: right;
  width: 40px;
  height: 30px;
  margin-left: 10px;

}

.card-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.card-title button {
  background: none;
  border: none;
  cursor: pointer;
  float: right;
  width: 40px;
  height: 30px;
  margin-left: 10px;
}

.card-description {
  font-size: 14px;
  line-height: 1.5;
  color: #7e7d7d;
  margin-top: 20px;
}



.container2 {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: 50px 20px;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title2 {
  font-size: 36px;
  margin-bottom: 10px;
  text-align: center;
}

.subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 40px;
  text-align: center;
}

.steps {
  display: flex;
  justify-content: space-between;
}

.step {
  width: 150px;
  height: 180px;
  background-color: #e0e0e0;
  padding: 20px;
  border-radius: 5px;
}

.step img {
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.step-title {
  font-size: 16px;
  margin-bottom: 10px;
  text-align: center;
}

.step-desc {
  font-size: 12px;
  color: #333;
  text-align: center;
}

.all img {
  width: 30px;
  height: 40px;
}

.container3 {
  width: 1500px;
  margin: 40px auto;
  text-align: center;
  margin-top: 150px;
}

.title3 {
  font-size: 2em;
  margin-bottom: 10px;
}

.subtitle2 {
  font-size: 1em;
  color: gray;
  margin-bottom: 40px;
}

.reviews {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: 100px;
  gap: 20px;
}

.reviews2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-right: 100px;
  gap: 20px;
}

.review {
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  width: 350px;
  height: 150px;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  margin: 10px;
}

.review img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  left: 30px;
}

.review h3 {
  margin: 0 0;
  position: absolute;
  top: 25px;
  left: 100px;
  font-weight: bold;
  font-size: 18px;
}

.review a {
  color: #6200ea;
  text-decoration: none;
  position: absolute;
  top: 55px;
  left: 98px;
}

.review p {
  position: absolute;
  top: 70px;
  text-align: left;
  padding-right: 20px;
}

.container4 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  margin-right: 600px;
}

.logo {
  margin-top: -50px;
  margin-left: 50px;
}

.logo img {
  width: 130px;
  height: 90px;
  margin-right: 20px;
  margin-top: -60px;
}

.content1 {
  margin-top: 0;
  margin-left: 40px;
}

.category {
  margin-bottom: 15px;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.links a {
  text-decoration: none;
  color: rgb(78, 77, 77);
  background: transparent;
  border: none;
  cursor: pointer;
}

.links a:hover {
  color: rgb(0, 106, 255);
}

.footer {
  margin-top: 30px;
  padding: 10px 0;
  border-top: 1px solid #ddd;
  text-align: center;
}

.footer a {
  text-decoration: none;
  color: rgb(78, 77, 77);
  background: transparent;
  border: none;
  cursor: pointer;
}

.footer .credits {
  margin-top: 5px;
  font-size: 12px;
  color: gray;
}

.chat-button {
  position: fixed;
  right: 40px;
  bottom: 40px;
  width: 60px;
  height: 60px;
  z-index: 2000;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  animation: pulse 2s infinite;
}

.chat-button:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(64, 158, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(64, 158, 255, 0);
  }
}
</style>